---
description: Обязательный компонент, в который нужно обернуть всё приложение.
  В нём инкапсулирована логика управления платформой, темой, локализацией и другими глобальными настройками приложения.
---

<Overview group="configuration">

# ConfigProvider [tag:component]

[Обязательный компонент](/overview/install#step4), в который нужно обернуть всё приложение. В нём инкапсулирована логика управления:

- платформой,
- темой,
- локализацией,
- и другими глобальными настройками приложения.

</Overview>

## Платформа

Влияет на внешний вид компонентов, анимации и поведение интерфейса. Задаётся свойством `platform`.

- `"android"` – используется на настольных и мобильных устройствах под управлением системы Android.
- `"ios"` – используется на мобильных устройствах или планшетах с системой iOS/iPadOS.
- `"vkcom"` – используется командой ВКонтакте. На данный момент она не предназначена для адаптивного интерфейса, используйте её только
  в том случае, если ваше приложение встроено в [vk.com](https://vk.com).

Если не указывать, то значение определяется автоматически на основе браузерной информации.

### Локальное переопределение

Оберните в нужном месте в [`PlatformProvider`](/components/platform-provider).

## Цветовая схема

Задаётся свойством `colorScheme`. Если не указывать, то значение определяется автоматически исходя из настроек операционной системы.

- `"light"` — светлая схема;
- `"dark"` — тёмная схема.

### Локальное переопределение

Оберните в нужном месте в [`ColorSchemeProvider`](/components/color-scheme-provider).

## Локализация

Задаётся свойством `locale`. Если не указывать, то значение будет равно `"ru"`. В качестве значений принимает строку с
[языковой меткой BCP 47](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).

> Данное свойство само по себе не отвечает за интернационализацию (`i18n`) и локализацию (`L10n`) вашего приложения.
> Для поддержки данной функциональности вам нужно будет воспользоваться сторонними решениями.
> VKUI лишь предоставляет возможность получить указанную локаль посредством вызова хука `useLocale`.
>
> Единственный компонент, на который по умолчанию влияет данной свойство, это `Calendar` (названия месяцев и дней недели).

### Локальное переопределение

Оберните в нужном месте в [`LocaleProvider`](/components/locale-provider).

## Направление контента

Задаётся свойством `direction`. По умолчанию значение определяется автоматически на основе атрибута `dir` на `body` страницы.

- `"ltr"` — направление "слева-направо" (для большинства языков);
- `"rtl"` — направление "справа-налево" (для арабского, иврита и т.д.).

### Локальное переопределение

Оберните в нужном месте в [`DirectionProvider`](/components/direction-provider).

## Токены тем

Задаётся свойством `tokensClassNames`. Позволяет настроить `CSS`-классы для различных тем и платформ.

```jsx
<ConfigProvider tokensClassNames={{ light: 'custom-light-theme', dark: 'custom-dark-theme' }}>
  <App />
</ConfigProvider>
```

## Анимации переходов [#animation]

Задаётся свойством `transitionMotionEnabled`.

- `true` — включены анимации переходов между экранами в [`Root`](/components/root) и [`View`](/components/view);
- `false` — анимации отключены.

## WebView

Задаётся свойством `isWebView`. Значение `true` позволяет приложению определить, что оно запущено в рамках мобильного приложения.

<Callout>
  При `isWebView={true}` и `platform="ios"` для компонента [`View`](/components/view) включается
  возможность навигации через смахивание.
</Callout>

## Хук useConfigProvider [#use-config-provider]

Для получения текущих настроек приложения используйте хук `useConfigProvider`:

```jsx
import { useConfigProvider } from '@vkontakte/vkui';
```

```jsx
const { colorScheme, platform, locale, direction, ...restProps } = useConfigProvider();
```

## Свойства и методы [#api]

<PropsTable name="ConfigProvider">

### ConfigProvider [#config-provider-api]

### useConfigProvider [#use-config-provider-api]

</PropsTable>
